<script setup lang="ts">
import { tableInfo } from "./interface";

const props = withDefaults(defineProps<tableInfo>(), {
  colInfo: () => [
    {
      labelName: "企业名称",
      dataProps: ["data1"]
    },
    { labelName: "企业节点标识前缀", dataProps: ["data2", "data3"] }
  ],
  tableData: () => [
    {
      data1: "浪潮",
      data2: "MA.10000.900000.00000003",
      data3: "12312321"
    },
    {
      data1: "致景",
      data2: "MA.10000.900000.00000019",
      data3: "12312321"
    }
  ]
});
const emit = defineEmits(["btnClick1"]);
const clickBtn1 = () => {
  console.log("clickBtn1");
  emit("btnClick1", ["btn1", "11"]);
};

const headFirst = ({ row, rowIndex, columnIndex }) => {
  // 这里 row[5] 为表头倒数第二列, row[6] 为倒数第一列
  if (rowIndex === 1) {
    return { display: "none" };
  }
};
</script>

<template>
  <el-col :span="2" :offset="22" class="button-edit">
    <el-button type="primary" class="form-btn1" @click="clickBtn1()">
      编辑
    </el-button>
  </el-col>
  <el-table
    :data="props.tableData"
    :border="true"
    :header-cell-style="headFirst"
  >
    <el-table-column
      v-for="item in props.colInfo"
      :key="item.labelName"
      :label="item.labelName"
    >
      <el-table-column v-for="prop in item.dataProps" :prop="prop" />
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped>
:deep(.el-table__header th) {
  background-color: #ebeef5; /* 设置表头背景颜色 */
  font-weight: bold !important;
}
:deep(.el-table__inner-wrapper) {
  font-size: 14px;
  font-weight: 400;
}

.button-edit {
  padding: 0px !important;
  background-color: antiquewhite;
  margin-top: 2vh;
  margin-bottom: 2vh;
  .form-btn1 {
    width: 100%;
  }
}
</style>
